// Color Palette
$black: #000;
$white: #fff;
$gray-1: #f7f8fa;
$gray-2: #f2f3f5;
$gray-3: #ebedf0;
$gray-4: #dcdee0;
$gray-5: #c8c9cc;
$gray-6: #969799;
$gray-7: #646566;
$gray-8: #323233;
$red: #f23a3a;
$blue: #1989fa;
$orange: #ff7200;
$orange-dark: #f75f30;
$orange-light: #fffbe8;
$green: #07c160;
$yellow: #ffd01e;

// Gradient Colors
$gradient-red: linear-gradient(to right, $red, $orange-dark);
$gradient-orange: linear-gradient(to right, $orange-dark, $red); // #ff8917

// Component Colors
$text-color: $gray-8;
$active-color: $gray-2;
$active-opacity: 0.7;
$disabled-opacity: 0.5;
$background-color: $gray-1;
$background-color-light: #fafafa;

// Custom Colors
$primary: #ff4400;
$secondary: $gray-6 !default;
$success: $green !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-2 !default;
$dark: $gray-8 !default;

// Padding
$padding-base: 1vw;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// Margin
$margin-base: 1vw;
$margin-xs: $margin-base * 2;
$margin-sm: $margin-base * 3;
$margin-md: $margin-base * 4;
$margin-lg: $margin-base * 6;
$margin-xl: $margin-base * 8;

// Font
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-weight-bold: 500;
$price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  sans-serif;

// Animation
$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;

// Border
$border-color: $gray-3;
$border-width-base: 1px;
$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 8px;
$border-radius-max: 999px;
